<template>
  <a-form-model
    ref="ruleForm"
    :model="form"
    :rules="rules"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-model-item label="标题" prop="title">
      <a-input v-model="form.title" type="textarea" />
    </a-form-model-item>
    <a-form-model-item ref="intro" label="简介" prop="intro">
      <a-upload
        name="file"
        :multiple="true"
        :show-upload-list="false"
        :customRequest="uploadintroFile"
        :loading="uploading"
      >
        <a-button> <a-icon type="upload" /> Upload </a-button>
      </a-upload>
      <div
        v-for="(item, index) in introFileList"
        :style="{ lineHeight: '30px' }"
      >
        <a @click="downloadintroFile(item)"
          ><a-icon type="link" />{{ item.name }}</a
        >
        <a
          @click="delintroFile(item)"
          :style="{ paddingLeft: '10px', color: 'red' }"
          ><a-icon type="delete"
        /></a>
      </div>
    </a-form-model-item>
    <a-form-model-item ref="content" label="内容" prop="content">
      <a-select v-model="form.content" placeholder="请选择内容">
        <a-select-option v-for="(item, index) in content_data" :value="item.id">
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item ref="read_num" label="阅读数量" prop="read_num">
      <a-checkbox-group v-model="form.read_num">
        <a-checkbox v-for="(item, index) in read_num_data" :value="item.id">{{
          item.name
        }}</a-checkbox>
      </a-checkbox-group>
    </a-form-model-item>
    <a-form-model-item ref="order_by" label="排序" prop="order_by">
      <a-input
        v-model="form.order_by"
        @blur="
          () => {
            $refs.order_by.onFieldBlur();
          }
        "
      />
    </a-form-model-item>
    <a-form-model-item ref="remark" label="备注" prop="remark">
      <rich-text :text="form.remark" @editorChange="editorChange" />
    </a-form-model-item>
  </a-form-model>
</template>
<script>
import { saveOrUpdate } from "@/api/gencode/mycontent";
import { findDictionaryList } from "@/api/system/dictionary";
import { upload } from "@/api/common/upload";
import RichText from "@/components/Common/RichText";
export default {
  // 声明当前子组件接收父组件传递的属性
  props: {
    record: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: "",
      mybol: false,
      headers: {
        authorization: "authorization-text",
      },
      uploading: false,
      form: {
        id: "",
        title: "",
        intro: "",
        content: "",
        read_num: [],
        order_by: "",
        remark: "",
      },
      introFileList: [],
      content_data: [],
      read_num_data: [],
      rules: {
        title: [
          { required: true, message: "必填项不能为空", trigger: "blur" },
          {
            min: 0,
            max: 120,
            message: "长度不得大于120个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  components: {
    RichText,
  },
  mounted() {
    if (this.record.id != undefined) {
      this.form = this.record;
    }
    if (this.record.introFileList != undefined) {
      this.introFileList = this.record.introFileList;
    }
    this.initData();
  },
  methods: {
    delintroFile(record, fileList) {
      let index = this.introFileList.findIndex((ele) => {
        return ele.id === record.id;
      });
      //假设没有找到
      if (index === -1) {
        return console.log("删除失败");
      }
      //删除元素
      this.introFileList.splice(index, 1);
      this.form.intro = this.introFileList.map((map) => {
        return map.id;
      });
    },
    downloadintroFile(record) {
      window.location.href =
        process.env.VUE_APP_API_URL +
        "/common/upload/downloadFile?name=" +
        record.name +
        "&file_path=" +
        record.file_path;
    },
    // 上传文件
    uploadintroFile(file) {
      this.uploading = true;
      const formData = new FormData();
      formData.append("file", file.file);
      upload(formData).then(
        (res) => {
          if (res.success) {
            this.introFileList.push(res.data);
            this.uploading = false;
            this.form.intro = this.introFileList.map((map) => {
              return map.id;
            });
          }
        },
        (err) => {
          this.uploading = false;
        }
      );
    },
    editorChange: function (html) {
      this.content = html;
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    onOk() {
      return new Promise((resolve) => {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.form.read_num = this.form.read_num.join(",");
            saveOrUpdate(this.form).then((response) => {
              resolve(true);
            });
            return true;
          } else {
            return false;
          }
        });
        
      });
    },
    onCancel() {
      return new Promise((resolve) => {
        resolve(true);
      });
    },
    initData() {
      this.form.title = "1";
      findDictionaryList({ parent_code: "fl1001" }).then((response) => {
        this.content_data = response.data;
      });

      const options = [
        { id: "0", name: "北京" },
        { id: "1", name: "上海" },
        { id: "2", name: "深圳" },
      ];
      this.read_num_data = options;

      this.form.read_num = ["1"];
    },
  },
};
</script>
